/* 
 * Basic Reset
 */
* {
    margin: 0; padding: 0;
    color: #717171;
}

h1, h2, h3, h4, h5, h6 { font-weight: normal; }
img, fieldset { border: 0; }
img { max-width: 100%; vertical-align: middle; }
button { cursor: pointer; }
ul { list-style: none; }
a { text-decoration: none;}

a:hover {
    cursor: pointer;
}
/* 
 * typograph
 */
body, input, select, textarea, button {
    font-family: 'Helvetica', 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', 'Arial', 'sans-serif';
}


.g-doc {
    position: relative;
    overflow: hidden;
    background: url(../images/bg.jpg) repeat-y center center;
    background-size: 100% 100%;
}

.g-doc  .g-bd {
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
}

.g-ct {
    position: relative;
    display: block;
    overflow: hidden;
    background: url(../images/bg.jpg) repeat-y center center;
    background-size: 100% 100%;
}

.g-logo img{
    width: 100%;
}

.g-content {
    position: relative;
}

.char-wrapper {
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    padding-bottom:  126.875%; /* 812 */
}

.char-wrapper img {
    width: 100%;
    vertical-align: top;
}

.animated-char {
  -webkit-animation-duration: 6s;
          animation-duration: 6s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

#yue1 {
    position: absolute;
    top: 7.266009852217%;
    left: 54.6875%; /* 350px */
    width: 12.65625%;
}
@-webkit-keyframes yue1Move {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }

  20% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }

  40% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(5%, 708.641975308642%, 0);
            transform: translate3d(5%, 708.641975308642%, 0);
  }
  80% {
    opacity: 1;
    -webkit-transform: translate3d(5%, 708.641975308642%, 0);
            transform: translate3d(5%, 708.641975308642%, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(1000px, -2000px, 0);
            transform: translate3d(1000px, -2000px, 0);
  }
}

.yue1Move {
    -webkit-animation-name: yue1Move;
            animation-name: yue1Move;
}


#yue2 {
    position: absolute;
    top: 7.266009852217%;
    left: 60.625%; /* 388px */
    width: 6.875%;
}

@-webkit-keyframes yue2Move {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }

  20% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }

  40% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-450%, 960%, 0);
            transform: translate3d(-450%, 960%, 0);
  }
  80% {
    opacity: 1;
    -webkit-transform: translate3d(-450%, 960%, 0);
            transform: translate3d(-450%, 960%, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(1000px, -2000px, 0);
            transform: translate3d(1000px, -2000px, 0);
  }
}

.yue2Move {
    -webkit-animation-name: yue2Move;
            animation-name: yue2Move;
}

#yue3 {
    position: absolute;
    top: 7.266009852217%;
    left: 64.53125%; /* 413px */
    width: 2.5%;
}

@-webkit-keyframes yue3Move {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    -webkit-filter: blur(0); 
            filter: blur(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
    -webkit-filter: blur(0); 
            filter: blur(0);
  }

  40% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
    -webkit-filter: blur(0); 
            filter: blur(0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-500%, 460%, -100px);
            transform: translate3d(-500%, 460%, -100px);
        -webkit-filter: blur(2px); 
                filter: blur(2px);
  }
  80% {
    opacity: 1;
    -webkit-transform: translate3d(-500%, 460%, -100px);
            transform: translate3d(-500%, 460%, -100px);
        -webkit-filter: blur(2px); 
                filter: blur(2px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(1000px, -2000px, 0);
            transform: translate3d(1000px, -2000px, 0);
    -webkit-filter: blur(0); 
            filter: blur();
  }
}

.yue3Move {
    -webkit-animation-name: yue3Move;
            animation-name: yue3Move;
}


#guo1 {
    position: absolute;
    top: 18.349753694581%;
    left: 55.46875%; /* 355px */
    width: 2.8125%;
}

@-webkit-keyframes guo1Move {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }

  20% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }

  40% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(5%, 708.641975308642%, 0);
            transform: translate3d(5%, 708.641975308642%, 0);
  }
  80% {
    opacity: 1;
    -webkit-transform: translate3d(5%, 708.641975308642%, 0);
            transform: translate3d(5%, 708.641975308642%, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(1000px, -2000px, 0);
            transform: translate3d(1000px, -2000px, 0);
  }
}

.guo1Move {
    -webkit-animation-name: guo1Move;
            animation-name: guo1Move;
}


#guo2 {
    position: absolute;
    top: 20.935960591133%;
    left: 54.6875%; /* 350px */
    width: 12.96875%;
}

@-webkit-keyframes guo2Move {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
    -webkit-filter: blur(0); 
            filter: blur(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
    -webkit-filter: blur(0); 
            filter: blur(0);
  }

  40% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
    -webkit-filter: blur(0); 
            filter: blur(0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(250%, 460%, 0);
            transform: translate3d(250%, 460%, 0);
        -webkit-filter: blur(2px); 
                filter: blur(2px);
  }
  80% {
    opacity: 1;
    -webkit-transform: translate3d(250%, 460%, 0);
            transform: translate3d(250%, 460%, 0);
        -webkit-filter: blur(2px); 
                filter: blur(2px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(1000px, -2000px, 0);
            transform: translate3d(1000px, -2000px, 0);
    -webkit-filter: blur(0); 
            filter: blur(0);

  }
}

.guo2Move {
    -webkit-animation-name: guo2Move;
            animation-name: guo2Move;
}



#guo3 {
    position: absolute;
    top: 18.349753694581%;
    left: 58.90625%; /* 377px */
    width: 8.90625%;
}

@-webkit-keyframes guo3Move {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }

  20% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }

  40% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-300%, 660%, 0);
            transform: translate3d(-300%, 660%, 0);
  }
  80% {
    opacity: 1;
    -webkit-transform: translate3d(-300%, 660%, 0);
            transform: translate3d(-300%, 660%, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(1000px, -2000px, 0);
            transform: translate3d(1000px, -2000px, 0);
  }
}

.guo3Move {
    -webkit-animation-name: guo3Move;
            animation-name: guo3Move;
}

#guo4 {
    position: absolute;
    top: 21.79802955665%;
    left: 59.84375%; /* 377px */
    width: 2.65625%;
}

@-webkit-keyframes guo4Move {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }

  20% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }

  40% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(10%, 360%, 0);
            transform: translate3d(10%, 360%, 0);
  }
  80% {
    opacity: 1;
    -webkit-transform: translate3d(10%, 360%, 0);
            transform: translate3d(10%, 360%, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(1000px, -2000px, 0);
            transform: translate3d(1000px, -2000px, 0);
  }
}

.guo4Move {
    -webkit-animation-name: guo4Move;
            animation-name: guo4Move;
}


#shan {
    position: absolute;
    top: 29.556650246305%;
    left: 55.625%; /* 356px */
    width: 11.25%;
}

@-webkit-keyframes shanMove {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }

  20% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }

  40% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(200%, 60%, 0);
            transform: translate3d(200%, 60%, 0);
  }
  80% {
    opacity: 1;
    -webkit-transform: translate3d(200%, 60%, 0);
            transform: translate3d(200%, 60%, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(1000px, -2000px, 0);
            transform: translate3d(1000px, -2000px, 0);
  }
}

.shanMove {
    -webkit-animation-name: shanMove;
            animation-name: shanMove;
}


#qiu {
    position: absolute;
    top: 40.64039408867%;
    left: 54.6875%; /* 350px */
    width: 12.5%;   /* 80px */
}

@-webkit-keyframes qiuMove {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }

  20% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }

  40% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-100%, 600%, 0);
            transform: translate3d(-100%, 600%, 0);
  }
  80% {
    opacity: 1;
    -webkit-transform: translate3d(-100%, 600%, 0);
            transform: translate3d(-100%, 600%, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(1000px, -2000px, 0);
            transform: translate3d(1000px, -2000px, 0);
  }
}

.qiuMove {
    -webkit-animation-name: qiuMove;
            animation-name: qiuMove;
}


#douhao {
    position: absolute;
    top: 55.172413793103%;
    left: 60%; /* 350px */
    width: 2.5%;   /* 80px */
}

@-webkit-keyframes douhaoMove {
  0% {
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  40% {
    opacity: 1;
  }

  45% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

.douhaoMove {
    -webkit-animation-name: douhaoMove;
            animation-name: douhaoMove;
}


#yuan1 {
    position: absolute;
    top: 24.261083743842%; /* 138px */
    left: 33.06875%; /* 211px */
    width: 13.4375%;   /* 86px */
}

@-webkit-keyframes yuan1Move {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }

  20% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }

  40% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(150%, 50%, 0);
            transform: translate3d(150%, 50%, 0);
  }
  80% {
    opacity: 1;
    -webkit-transform: translate3d(150%, 50%, 0);
            transform: translate3d(150%, 50%, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(1000px, -2000px, 0);
            transform: translate3d(1000px, -2000px, 0);
  }
}

.yuan1Move {
    -webkit-animation-name: yuan1Move;
            animation-name: yuan1Move;
}



#yuan2 {
    position: absolute;
    top: 31.527093596059%; /* 256px */
    left: 33.28125%; /* 213px */
    width: 2.5%;   /* 16px */
}

@-webkit-keyframes yuan2Move {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }

  20% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }

  40% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(100%, -750%, 0);
            transform: translate3d(100%, -750%, 0);
  }
  80% {
    opacity: 1;
    -webkit-transform: translate3d(100%, -750%, 0);
            transform: translate3d(100%, -750%, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(1000px, -2000px, 0);
            transform: translate3d(1000px, -2000px, 0);
  }
}

.yuan2Move {
    -webkit-animation-name: yuan2Move;
            animation-name: yuan2Move;
}



#yuan3 {
    position: absolute;
    top: 31.034482758621%; /* 252px */
    left: 36.5625%; /* 235px */
    width: 6.71875%;   /* 43px */
}

@-webkit-keyframes yuan3Move {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }

  20% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }

  40% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(100%, -600%, 0);
            transform: translate3d(100%, -600%, 0);
  }
  80% {
    opacity: 1;
    -webkit-transform: translate3d(100%, -600%, 0);
            transform: translate3d(100%, -600%, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(1000px, -2000px, 0);
            transform: translate3d(1000px, -2000px, 0);
  }
}

.yuan3Move {
    -webkit-animation-name: yuan3Move;
            animation-name: yuan3Move;
}


#yuan4 {
    position: absolute;
    top: 31.28078817734%; /* 254px */
    left: 38.59375%; /* 247px */
    width: 2.8125%;   /* 18px */
}

@-webkit-keyframes yuan4Move {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }

  20% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }

  40% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(200%, -700%, 0);
            transform: translate3d(200%, -700%, 0);
  }
  80% {
    opacity: 1;
    -webkit-transform: translate3d(200%, -700%, 0);
            transform: translate3d(200%, -700%, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(1000px, -2000px, 0);
            transform: translate3d(1000px, -2000px, 0);
  }
}

.yuan4Move {
    -webkit-animation-name: yuan4Move;
            animation-name: yuan4Move;
}



#yuan5 {
    position: absolute;
    top: 31.4039408867%; /* 255px */
    left: 43.28125%; /* 277px */
    width: 2.96875%;   /* 19px */
}

@-webkit-keyframes yuan5Move {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }

  20% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }

  40% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-400%, -100%, 0);
            transform: translate3d(-400%, -100%, 0);
  }
  80% {
    opacity: 1;
    -webkit-transform: translate3d(-400%, -100%, 0);
            transform: translate3d(-400%, -100%, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(1000px, -2000px, 0);
            transform: translate3d(1000px, -2000px, 0);
  }
}

.yuan5Move {
    -webkit-animation-name: yuan5Move;
            animation-name: yuan5Move;
}


#ni1 {
    position: absolute;
    top: 35.221674876847%; /* 286px */
    left: 32.96875%; /* 211px */
    width: 4.84375%;   /* 31px */
}

@-webkit-keyframes ni1Move {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }

  20% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }

  40% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-400%, -350%, 0);
            transform: translate3d(-400%, -350%, 0);
  }
  80% {
    opacity: 1;
    -webkit-transform: translate3d(-400%, -350%, 0);
            transform: translate3d(-400%, -350%, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(1000px, -2000px, 0);
            transform: translate3d(1000px, -2000px, 0);
  }
}

.ni1Move {
    -webkit-animation-name: ni1Move;
            animation-name: ni1Move;
}


#ni2 {
    position: absolute;
    top: 35.221674876847%; /* 286px */
    left: 36.40625%; /* 233px */
    width: 9.21875%;   /* 59px */
}

@-webkit-keyframes ni2Move {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }

  20% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }

  40% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -150%, 0);
            transform: translate3d(0, -150%, 0);
  }
  80% {
    opacity: 1;
    -webkit-transform: translate3d(0, -150%, 0);
            transform: translate3d(0, -150%, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(1000px, -2000px, 0);
            transform: translate3d(1000px, -2000px, 0);
  }
}

.ni2Move {
    -webkit-animation-name: ni2Move;
            animation-name: ni2Move;
}


#ni3 {
    position: absolute;
    top: 39.778325123153%; /* 323px */
    left: 36.25%; /* 232px */
    width: 3.75%;   /* 24px */
}

@-webkit-keyframes ni3Move {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }

  20% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }

  40% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(150%, 50%, 0);
            transform: translate3d(150%, 50%, 0);
  }
  80% {
    opacity: 1;
    -webkit-transform: translate3d(150%, 50%, 0);
            transform: translate3d(150%, 50%, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(1000px, -2000px, 0);
            transform: translate3d(1000px, -2000px, 0);
  }
}

.ni3Move {
    -webkit-animation-name: ni3Move;
            animation-name: ni3Move;
}



#ni4 {
    position: absolute;
    top: 40.194088669951%; /* 328px */
    left: 42.65625%; /* 273px */
    width: 3.28125%;   /* 21px */
}

@-webkit-keyframes ni4Move {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }

  20% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }

  40% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(150%, 50%, 0);
            transform: translate3d(150%, 50%, 0);
  }
  80% {
    opacity: 1;
    -webkit-transform: translate3d(150%, 50%, 0);
            transform: translate3d(150%, 50%, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(1000px, -2000px, 0);
            transform: translate3d(1000px, -2000px, 0);
  }
}

.ni4Move {
    -webkit-animation-name: ni4Move;
            animation-name: ni4Move;
}

#mei1 {
    position: absolute;
    top: 46.428571428571%; /* 318 + 59px */
    left: 36.25%; /* 232px */
    width: 2.5%;   /* 16px */
}

@-webkit-keyframes mei1Move {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        -webkit-filter: blur(0); 
                filter: blur(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
        -webkit-filter: blur(0); 
                filter: blur(0);
  }

  40% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
        -webkit-filter: blur(0); 
                filter: blur(0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-350%, -50%, -100px);
            transform: translate3d(-350%, -50%, -100px);
        -webkit-filter: blur(2px); 
                filter: blur(2px);
  }
  80% {
    opacity: 1;
    -webkit-transform: translate3d(-350%, -50%, -100px);
            transform: translate3d(-350%, -50%, -100px);
        -webkit-filter: blur(2px); 
                filter: blur(2px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(1000px, -2000px, 0);
            transform: translate3d(1000px, -2000px, 0);
        -webkit-filter: blur(0); 
                filter: blur(0);
  }
}

.mei1Move {
    -webkit-animation-name: mei1Move;
            animation-name: mei1Move;
}


#mei2 {
    position: absolute;
    top: 46.428571428571%; /* 318 + 59px */
    left: 40.3125%; /* 258px */
    width: 2.96875%;   /* 19px */
}

@-webkit-keyframes mei2Move {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
            -webkit-filter: blur(0); 
                filter: blur(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
            -webkit-filter: blur(0); 
                filter: blur(0);
  }

  40% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
            -webkit-filter: blur(0); 
                filter: blur(0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(350%, 300%, -100px);
            transform: translate3d(350%, 300%, -100px);
            -webkit-filter: blur(2px); 
                filter: blur(2px);
  }
  80% {
    opacity: 1;
    -webkit-transform: translate3d(350%, 300%, -100px);
            transform: translate3d(350%, 300%, -100px);
            -webkit-filter: blur(2px); 
                filter: blur(2px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(1000px, -2000px, 0);
            transform: translate3d(1000px, -2000px, 0);
            -webkit-filter: blur(0); 
                filter: blur(0);
  }
}

.mei2Move {
    -webkit-animation-name: mei2Move;
            animation-name: mei2Move;
}



#mei3 {
    position: absolute;
    top: 47.413793103448%; /* 326 + 59px */
    left: 33.59375%; /* 215px */
    width: 11.71875%;   /* 75px */
}

@-webkit-keyframes mei3Move {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }

  20% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }

  40% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(50%, 50%, 0);
            transform: translate3d(50%, 50%, 0);
  }
  80% {
    opacity: 1;
    -webkit-transform: translate3d(50%, 50%, 0);
            transform: translate3d(50%, 50%, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(1000px, -2000px, 0);
            transform: translate3d(1000px, -2000px, 0);
  }
}

.mei3Move {
    -webkit-animation-name: mei3Move;
            animation-name: mei3Move;
}



#mei4 {
    position: absolute;
    top: 51.600985221675%; /* 360 + 59px */
    left: 33.125%; /* 212px */
    width: 12.03125%;   /* 77px */
}

@-webkit-keyframes mei4Move {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }

  20% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }

  40% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-100%, -250%, 0);
            transform: translate3d(-100%, -250%, 0);
  }
  80% {
    opacity: 1;
    -webkit-transform: translate3d(-100%, -250%, 0);
            transform: translate3d(-100%, -250%, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(1000px, -2000px, 0);
            transform: translate3d(1000px, -2000px, 0);
  }
}

.mei4Move {
    -webkit-animation-name: mei4Move;
            animation-name: mei4Move;
}



#mei5 {
    position: absolute;
    top: 53.571428571429%; /* 376 + 59px */
    left: 40.15625%; /* 257px */
    width: 5.3125%;   /* 34px */
}

@-webkit-keyframes mei5Move {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        -webkit-filter: blur(0); 
                filter: blur(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
        -webkit-filter: blur(0); 
                filter: blur(0);
  }

  40% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
        -webkit-filter: blur(0); 
                filter: blur(0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-350%, -50%, -100px);
            transform: translate3d(-350%, -50%, -100px);
        -webkit-filter: blur(2px); 
                filter: blur(2px);
  }
  80% {
    opacity: 1;
    -webkit-transform: translate3d(-350%, -50%, -100px);
            transform: translate3d(-350%, -50%, -100px);
        -webkit-filter: blur(2px); 
                filter: blur(2px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(1000px, -2000px, 0);
            transform: translate3d(1000px, -2000px, 0);
        -webkit-filter: blur(0); 
                filter: blur(0);
  }
}

.mei5Move {
    -webkit-animation-name: mei5Move;
            animation-name: mei5Move;
}



#li1 {
    position: absolute;
    top: 57.635467980296%; /* 409 + 59px */
    left: 33.06875%; /* 211px */
    width: 6.5625%;   /* 42px */
}

@-webkit-keyframes li1Move {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        -webkit-filter: blur(0); 
                filter: blur(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
        -webkit-filter: blur(0); 
                filter: blur(0);
  }

  40% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
        -webkit-filter: blur(0); 
                filter: blur(0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(250%, -150%, -100px);
            transform: translate3d(250%, -150%, -100px);
        -webkit-filter: blur(2px); 
                filter: blur(2px);
  }
  80% {
    opacity: 1;
    -webkit-transform: translate3d(250%, -150%, -100px);
            transform: translate3d(250%, -150%, -100px);
        -webkit-filter: blur(2px); 
                filter: blur(2px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(1000px, -2000px, 0);
            transform: translate3d(1000px, -2000px, 0);
        -webkit-filter: blur(0); 
                filter: blur(0);
  }
}

.li1Move {
    -webkit-animation-name: li1Move;
            animation-name: li1Move;
}

#li2 {
    position: absolute;
    top: 59.48275862069%; /* 424 + 59px */
    left: 33.75%; /* 216px */
    width: 5.625%;   /* 36px */
}

@-webkit-keyframes li2Move {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        -webkit-filter: blur(0); 
                filter: blur(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
        -webkit-filter: blur(0); 
                filter: blur(0);
  }

  40% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
        -webkit-filter: blur(0); 
                filter: blur(0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(450%, -50%, -100px);
            transform: translate3d(450%, -50%, -100px);
        -webkit-filter: blur(2px); 
                filter: blur(2px);
  }
  80% {
    opacity: 1;
    -webkit-transform: translate3d(450%, -50%, -100px);
            transform: translate3d(450%, -50%, -100px);
        -webkit-filter: blur(2px); 
                filter: blur(2px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(1000px, -2000px, 0);
            transform: translate3d(1000px, -2000px, 0);
        -webkit-filter: blur(0); 
                filter: blur(0);
  }
}

.li2Move {
    -webkit-animation-name: li2Move;
            animation-name: li2Move;
}


#li3 {
    position: absolute;
    top: 61.822660098522%; /* 443 + 59px */
    left: 35%; /* 224px */
    width: 2.8125%;   /* 18px */
}

@-webkit-keyframes li3Move {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        -webkit-filter: blur(0); 
                filter: blur(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
        -webkit-filter: blur(0); 
                filter: blur(0);
  }

  40% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
        -webkit-filter: blur(0); 
                filter: blur(0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-300%, -50%, -100px);
            transform: translate3d(-300%, -50%, -100px);
        -webkit-filter: blur(2px); 
                filter: blur(2px);
  }
  80% {
    opacity: 1;
    -webkit-transform: translate3d(-300%, -50%, -100px);
            transform: translate3d(-300%, -50%, -100px);
        -webkit-filter: blur(2px); 
                filter: blur(2px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(1000px, -2000px, 0);
            transform: translate3d(1000px, -2000px, 0);
        -webkit-filter: blur(0); 
                filter: blur(0);
  }
}

.li3Move {
    -webkit-animation-name: li3Move;
            animation-name: li3Move;
}

#li4 {
    position: absolute;
    top: 57.635467980296%; /* 409 + 59px */
    left: 39.375%; /* 252px */
    width: 6.875%;   /* 44px */
}

@-webkit-keyframes li4Move {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        -webkit-filter: blur(0); 
                filter: blur(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
        -webkit-filter: blur(0); 
                filter: blur(0);
  }

  40% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
        -webkit-filter: blur(0); 
                filter: blur(0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(400%, -100%, -100px);
            transform: translate3d(400%, -100%, -100px);
        -webkit-filter: blur(2px); 
                filter: blur(2px);
  }
  80% {
    opacity: 1;
    -webkit-transform: translate3d(400%, -100%, -100px);
            transform: translate3d(400%, -100%, -100px);
        -webkit-filter: blur(2px); 
                filter: blur(2px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(1000px, -2000px, 0);
            transform: translate3d(1000px, -2000px, 0);
        -webkit-filter: blur(0); 
                filter: blur(0);
  }
}

.li4Move {
    -webkit-animation-name: li4Move;
            animation-name: li4Move;
}

#li5 {
    position: absolute;
    top: 59.48275862069%; /* 424 + 59px */
    left: 40%; /* 256px */
    width: 5.9375%;   /* 38px */
}

@-webkit-keyframes li5Move {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }

  20% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }

  40% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(200%, 150%, 0);
            transform: translate3d(200%, 150%, 0);
  }
  80% {
    opacity: 1;
    -webkit-transform: translate3d(200%, 150%, 0);
            transform: translate3d(200%, 150%, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(1000px, -2000px, 0);
            transform: translate3d(1000px, -2000px, 0);
  }
}

.li5Move {
    -webkit-animation-name: li5Move;
            animation-name: li5Move;
}


#li6 {
    position: absolute;
    top: 61.822660098522%; /* 443 + 59px */
    left: 41.40625%; /* 265px */
    width: 2.5%;   /* 16px */
}

@-webkit-keyframes li6Move {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        -webkit-filter: blur(0); 
                filter: blur(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
        -webkit-filter: blur(0); 
                filter: blur(0);
  }

  40% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
        -webkit-filter: blur(0); 
                filter: blur(0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(500%, 0, -100px);
            transform: translate3d(500%, 0, -100px);
        -webkit-filter: blur(2px); 
                filter: blur(2px);
  }
  80% {
    opacity: 1;
    -webkit-transform: translate3d(500%, 0, -100px);
            transform: translate3d(500%, 0, -100px);
        -webkit-filter: blur(2px); 
                filter: blur(2px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(1000px, -2000px, 0);
            transform: translate3d(1000px, -2000px, 0);
        -webkit-filter: blur(0); 
                filter: blur(0);
  }
}

.li6Move {
    -webkit-animation-name: li6Move;
            animation-name: li6Move;
}




#yi1 {
    position: absolute;
    top: 68.472906403941%; /* 497 + 59px */
    left: 33.06875%; /* 211px */
    width: 5%;   /* 32px */
}

@-webkit-keyframes yi1Move {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        -webkit-filter: blur(0); 
                filter: blur(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
        -webkit-filter: blur(0); 
                filter: blur(0);
  }

  40% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
        -webkit-filter: blur(0); 
                filter: blur(0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-450%, -50%, 0);
            transform: translate3d(-450%, -50%, 0);
        -webkit-filter: blur(2px); 
                filter: blur(2px);
  }
  80% {
    opacity: 1;
    -webkit-transform: translate3d(-450%, -50%, 0);
            transform: translate3d(-450%, -50%, 0);
        -webkit-filter: blur(2px); 
                filter: blur(2px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(1000px, -2000px, 0);
            transform: translate3d(1000px, -2000px, 0);
        -webkit-filter: blur(0); 
                filter: blur(0);
  }
}

.yi1Move {
    -webkit-animation-name: yi1Move;
            animation-name: yi1Move;
}



#yi2 {
    position: absolute;
    top: 68.5960591133%; /* 498 + 59px */
    left: 35.78125%; /* 229px */
    width: 10.46875%;   /* 67px */
}

@-webkit-keyframes yi2Move {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }

  20% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }

  40% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(50%, -50%, 0);
            transform: translate3d(50%, -50%, 0);
  }
  80% {
    opacity: 1;
    -webkit-transform: translate3d(50%, -50%, 0);
            transform: translate3d(50%, -50%, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(1000px, -2000px, 0);
            transform: translate3d(1000px, -2000px, 0);
  }
}

.yi2Move {
    -webkit-animation-name: yi2Move;
            animation-name: yi2Move;
}



#yi3 {
    position: absolute;
    top: 71.79802955665%; /* 524 + 59px */
    left: 40.78125%; /* 261px */
    width: 5.625%;   /* 36px */
}

@-webkit-keyframes yi3Move {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        -webkit-filter: blur(0); 
                filter: blur(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
        -webkit-filter: blur(0); 
                filter: blur(0);
  }

  40% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
        -webkit-filter: blur(0); 
                filter: blur(0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(50%, 150%, 0);
            transform: translate3d(50%, 150%, 0);
        -webkit-filter: blur(2px); 
                filter: blur(2px);
  }
  80% {
    opacity: 1;
    -webkit-transform: translate3d(50%, 150%, 0);
            transform: translate3d(50%, 150%, 0);
        -webkit-filter: blur(2px); 
                filter: blur(2px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(1000px, -2000px, 0);
            transform: translate3d(1000px, -2000px, 0);
        -webkit-filter: blur(0); 
                filter: blur(0);
  }
}

.yi3Move {
    -webkit-animation-name: yi3Move;
            animation-name: yi3Move;
}


#jiu1 {
    position: absolute;
    top: 79.926108374384%; /* 590 + 59px */
    left: 34.21875%; /* 219px */
    width: 2.1875%;   /* 14px */
}

@-webkit-keyframes jiu1Move {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        -webkit-filter: blur(0); 
                filter: blur(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
        -webkit-filter: blur(0); 
                filter: blur(0);
  }

  40% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
        -webkit-filter: blur(0); 
                filter: blur(0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-150%, 0%, 0);
            transform: translate3d(-150%, 0%, 0);
        -webkit-filter: blur(2px); 
                filter: blur(2px);
  }
  80% {
    opacity: 1;
    -webkit-transform: translate3d(-150%, 0%, 0);
            transform: translate3d(-150%, 0%, 0);
        -webkit-filter: blur(2px); 
                filter: blur(2px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(1000px, -2000px, 0);
            transform: translate3d(1000px, -2000px, 0);
        -webkit-filter: blur(0); 
                filter: blur(0);
  }
}

.jiu1Move {
    -webkit-animation-name: jiu1Move;
            animation-name: jiu1Move;
}



#jiu2 {
    position: absolute;
    top: 79.926108374384%; /* 590 + 59px */
    left: 37.65625%; /* 241px */
    width: 8.28125%;   /* 53px */
}

@-webkit-keyframes jiu2Move {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }

  20% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }

  40% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(100%, -250%, 0);
            transform: translate3d(100%, -250%, 0);
  }
  80% {
    opacity: 1;
    -webkit-transform: translate3d(100%, -250%, 0);
            transform: translate3d(100%, -250%, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(1000px, -2000px, 0);
            transform: translate3d(1000px, -2000px, 0);
  }
}

.jiu2Move {
    -webkit-animation-name: jiu2Move;
            animation-name: jiu2Move;
}

#juhao {
    position: absolute;
    top: 92.980295566502%; /* 696 + 59px */
    left: 37.65625%; /* 241px */
    width: 3.59375%;   /* 23px */
}

@-webkit-keyframes juhaoMove {
  0% {
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  40% {
    opacity: 1;
  }

  60% {
    opacity: 0;
  }
  80% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

.juhaoMove {
    -webkit-animation-name: juhaoMove;
            animation-name: juhaoMove;
}


#dancer-bg {
    position: relative;
    display: block;
    padding-bottom: 116.875%;
    background: url(../images/01_dance_bg.png) no-repeat center bottom;
    background-size: 100%;
}

#dancers {
    position: absolute;
    display: block;
    padding-top: 28.75%; /*52.571428571429*/
    padding-bottom: 68.125%;
    width: 45.3125%;
    left: 31.40625%;
    /* padding-right: 13.90625%; */
    background: url(../images/01_dancers.png) no-repeat center bottom;
    background-size: 100%;
    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    animation-duration:1s;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
}

.swipe-hint {
    position: absolute;
    left: 6.5625%;
    bottom: 0;
    width: 12.8125%;
    padding-bottom: 24.0625%;
    background: url(../images/swipe_tip.png) no-repeat center top;
    background-size: 100%%;
}

.footer-logo {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding-bottom: 10.9375%;
    background: url(../images/ft_logo.png) no-repeat right top;
    background-size: 47.03125%;
}

.g-disclaimer {
    position: absolute;
    bottom: 0.5em;
    width: 100%;
    height: 2em;
}

.g-disclaimer ul {
    position: relative;
    display: block;
    height: 1em;
}

.g-disclaimer ul li {
    display: inline-block;
    width: 4%;
    text-align: center;
    font-size: 0.75em;
}
.g-disclaimer ul li:first-child {
    width: 48%;
    text-align: right;
}
.g-disclaimer ul li:last-child {
    width: 48%;
    text-align: left;
}

.g-disclaimer ul li a {
    display: block;
    line-height: 1.5em;
}
.pm-code {
    position: relative;
    display: block;
    text-align: center;
    height: 50%;
    line-height: 1em;
    font-size: 0.75em;
}

.swiper-container {
	width:100%;
	height: 100%;
    position: absolute;
}

.g-doc .g-bd .swiper-container .swiper-slide .m-screen{
	position:absolute;
	width:100%;
	height:100%;
}

.g-doc .g-bd .swiper-container .swiper-slide .m-screen .g-ct{
    position:absolute;
    left:0;
    top:0;
    width: 100%;
}


.m-screen .g-content {
    padding-bottom: 138.96875%
}

.m-screen1 .g-content .girl {
    position: absolute;
    left: 28.28125%;
    width: 46.5625%;
    height:100%;
    background: url(../images/01_girl.png) no-repeat center bottom;
    background-size: 100%;
}

.m-screen1 .g-content .story {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height:100%;
    background: url(../images/01_story.png) no-repeat center top;
    background-size: 100%;
}

.m-screen2 .g-content .girl {
    position: absolute;
    left: 38.203125%;
    width: 23.59375%;
    height:100%;
    background: url(../images/02_girl.png) no-repeat center bottom;
    background-size: 100%;
}

.m-screen2 .g-content .story {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height:100%;
    background: url(../images/02_story.png) no-repeat center top;
    background-size: 100%;
}
.m-screen3 .g-content .girl {
    position: absolute;
    left: 25.15625%;
    width: 74.84375%;
    height:100%;
    background: url(../images/03_girl.png) no-repeat center bottom;
    background-size: 100%;
}

.m-screen3 .g-content .story {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height:100%;
    background: url(../images/03_story.png) no-repeat center top;
    background-size: 100%;
}
.m-screen4 .g-content .girl {
    position: absolute;
    left: 29.84375%;
    width: 40.3125%;
    height:100%;
    background: url(../images/04_girl.png) no-repeat center bottom;
    background-size: 100%;
}

.m-screen4 .g-content .story {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height:100%;
    background: url(../images/04_story.png) no-repeat center top;
    background-size: 100%;
}

.m-screen5 .g-content .girl {
    position: absolute;
    left: 21.5625%;
    width: 78.4375%;
    height:100%;
    background: url(../images/05_girl.png) no-repeat center bottom;
    background-size: 100%;
}

.m-screen5 .g-content .story {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height:100%;
    background: url(../images/05_story.png) no-repeat center top;
    background-size: 100%;
}

.m-screen6 .g-content {
  padding-bottom: 142.96875%
}

.m-screen6 .g-content .girl {
    position: absolute;
    left: 19.921875%;
    width: 60.15625%;
    height:100%;
    background: url(../images/06_girl.png) no-repeat center bottom;
    background-size: 100%;
}

.m-screen6 .g-content .story {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height:100%;
    background: url(../images/06_story.png) no-repeat center top;
    background-size: 100%;
}


#slide7 .g-ct {
    background: url(../images/bg2.jpg) repeat-y center center;
    background-size: 100% 100%;
}

.m-screen7 .g-content .cities {
    position: absolute;
    left: 0;
    top: 60.886699507389%;
    width: 100%;
    padding-bottom: 54.375%;
}


.m-screen7 .g-content .cities .click-city {
    position: absolute;
    left: 64.375%;
    bottom: -25%;
    width: 23.4375%;
    height: 100%;
    background: url(../images/click_city.png) no-repeat left bottom;
    background-size: 100%;
}




.m-screen7 .g-content .story {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height:100%;
    background: url(../images/c_01_story.png) no-repeat center top;
    background-size: 100%;
}

.m-screen7 .g-content  a {
  display: block;
}
.beijing {
    position: absolute;
    top: 45%;
    left: 40.859375%;
    width: 18.28125%;
    padding-bottom: 18.90625%;
    background: url(../images/beijing.png) no-repeat center top;
    background-size: 100%;
}

.chengdu {
    position: absolute;
    top: 42%;
    left: 39.140625%;
    width: 21.71875%;
    padding-bottom: 23.125%;
    background: url(../images/chengdu.png) no-repeat center top;
    background-size: 100%;
}
.qingdao {
    position: absolute;
    top: 45%;
    left: 39.765625%;
    width: 20.46875%;
    padding-bottom: 18.90625%;
    background: url(../images/qingdao.png) no-repeat center top;
    background-size: 100%;
}
.guangzhou 
{
    position: absolute;
    top: 42%;
    left: 41.015625%;
    width: 17.96875%;
    padding-bottom: 24.0625%;
    background: url(../images/guangzhou.png) no-repeat center top;
    background-size: 100%;
}

@-webkit-keyframes beijingMove {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
}

.beijingMove {
    -webkit-animation-name: beijingMove;
            animation-name: beijingMove;
}

@-webkit-keyframes guangzhouMove {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(-180%, 0, 0);
            transform: translate3d(-180%, 0, 0);
  }
}

.guangzhouMove {
    -webkit-animation-name: guangzhouMove;
            animation-name: guangzhouMove;
}

@-webkit-keyframes chengduMove {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(150%, 0, 0);
            transform: translate3d(150%, 0, 0);
  }
}

.chengduMove {
    -webkit-animation-name: chengduMove;
            animation-name: chengduMove;
}


@-webkit-keyframes qingdaoMove {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
}

.qingdaoMove {
    -webkit-animation-name: qingdaoMove;
            animation-name: qingdaoMove;
}

.share-hint {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(113, 113, 113, 0.9);
  background-size: 100% 100%;
}

.share-hint img {
  position: relative;
  padding-top: 2.5%;
  left: 13.359375%;
  width: 73.28125%;
  margin: auto;
}

.city-show {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}
.city-show .g-ct {
    background: url(../images/bg2.jpg) repeat-y center center;
    background-size: 100% 100%;
}

.city-show .g-content {
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    padding-bottom: 147.03125%
}

.city-show .buttons {
  position: absolute;
  display: block;
  bottom: 0;
  left: 0;
  width: 100%;
}

.city-show .buttons li {
  display: inline-block;
  width: 50%;
  height:100%;
}

.city-show #share a {
  display: block;
  width: 100%;
  height:100%;
  margin-right: 5px;
}

.city-show #survey a {
  display: block;
  width: 100%;
  height:100%;
  margin-left: 5px;
}

.city-show .buttons a img {
  display: block;
  width: 80%;
}

.city-show #share a img {
  float: right;
}

.city-show .close {
  position: absolute;
  top: 37.856328392246%;
  left: 76.875%;
  width: 9.0625%;
  padding-bottom: 9.0625%;
  background: url(../images/close.png) no-repeat center center;
  background-size: 100%;
}

#beijing .story {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height:100%;
    background: url(../images/bj_story.png) no-repeat center top;
    background-size: 100%;
}

#guangzhou .story {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height:100%;
    background: url(../images/gz_story.png) no-repeat center top;
    background-size: 100%;
}

#chengdu .story {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height:100%;
    background: url(../images/cd_story.png) no-repeat center top;
    background-size: 100%;
}

#qingdao .story {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height:100%;
    background: url(../images/qd_story.png) no-repeat center top;
    background-size: 100%;
}

#divLoadingLogo{
    position: absolute;
    width: 100%;
    z-index: 1000001;
    bottom: 5%;
}



.f-fl{float:left}
.f-fr{float:right}
.f-cb{clear:both}
.f-db{display:block}
.f-dib{display:inline-block}
.f-hc{display:block;margin-left:auto;margin-right:auto}
.f-dn{display:none}
.f-fsi{font-style:italic}
.f-fwb{font-weight:700}
.f-cp{cursor:pointer}
.f-ad0{-webkit-animation-delay:0s;-moz-animation-delay:0s;animation-delay:0s}
.f-ad1{-webkit-animation-delay:.2s;-moz-animation-delay:0.2s;animation-delay:.2s}
.f-ad2{-webkit-animation-delay:.4s;-moz-animation-delay:0.4s;animation-delay:.4s}
.f-ad3{-webkit-animation-delay:.6s;-moz-animation-delay:0.6s;animation-delay:.6s}
.f-ad4{-webkit-animation-delay:.8s;-moz-animation-delay:0.8s;animation-delay:.8s}
.f-ad5{-webkit-animation-delay:1s;-moz-animation-delay:1s;animation-delay:1s}
.f-ad6{-webkit-animation-delay:1.2s;-moz-animation-delay:1.2s;animation-delay:1.2s}
.f-ad7{-webkit-animation-delay:1.4s;-moz-animation-delay:1.4s;animation-delay:1.4s}
.f-ad8{-webkit-animation-delay:1.6s;-moz-animation-delay:1.6s;animation-delay:1.6s}
.f-ad9{-webkit-animation-delay:1.8s;-moz-animation-delay:1.8s;animation-delay:1.8s}
.f-ad10{-webkit-animation-delay:2s;-moz-animation-delay:2s;animation-delay:2s}
.f-ad11{-webkit-animation-delay:2.2s;-moz-animation-delay:2.2s;animation-delay:2.2s}
.f-ad12{-webkit-animation-delay:2.4s;-moz-animation-delay:2.4s;animation-delay:2.4s}
.f-ad13{-webkit-animation-delay:2.6s;-moz-animation-delay:2.6s;animation-delay:2.6s}
.f-ad14{-webkit-animation-delay:2.8s;-moz-animation-delay:2.8s;animation-delay:2.8s}
.f-ad15{-webkit-animation-delay:3s;-moz-animation-delay:3s;animation-delay:3s}
.f-ad16{-webkit-animation-delay:3.2s;-moz-animation-delay:3.2s;animation-delay:3.2s}
.f-ad17{-webkit-animation-delay:3.4s;-moz-animation-delay:3.4s;animation-delay:3.4s}
.f-ad18{-webkit-animation-delay:3.6s;-moz-animation-delay:3.6s;animation-delay:3.6s}
.f-ad19{-webkit-animation-delay:3.8s;-moz-animation-delay:3.8s;animation-delay:3.8s}
.f-ad20{-webkit-animation-delay:4s;-moz-animation-delay:4s;animation-delay:4s}
.f-ad21{-webkit-animation-delay:4.2s;-moz-animation-delay:4.2s;animation-delay:4.2s}
.f-ad22{-webkit-animation-delay:4.4s;-moz-animation-delay:4.4s;animation-delay:4.4s}
.f-ad23{-webkit-animation-delay:4.6s;-moz-animation-delay:4.6s;animation-delay:4.6s}
.f-ad24{-webkit-animation-delay:4.8s;-moz-animation-delay:4.8s;animation-delay:4.8s}
.f-ann{	
	-webkit-animation-name:none!important;
	-moz-animation-name:none!important;
	animation-name:none!important;
	display:none!important
}
.f-anii{
	-webkit-animation-iteration-count:infinite;
	-moz-animation-iteration-count:infinite;
	animation-iteration-count:infinite;
}
.animated{
	-webkit-animation-duration: .8s;
	-moz-animation-duration: .8s;
	animation-duration: .8s;
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0)
}


@-webkit-keyframes bounceDown {
  0%, 20%, 53%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -10px, 0);
            transform: translate3d(0, -10px, 0);
  }

  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -5px, 0);
            transform: translate3d(0, -5px, 0);
  }

  90% {
    -webkit-transform: translate3d(0,-2px,0);
            transform: translate3d(0,-2px,0);
  }
}

@keyframes bounceDown {
  0%, 20%, 53%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -10px, 0);
            transform: translate3d(0, -10px, 0);
  }

  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -5px, 0);
            transform: translate3d(0, -5px, 0);
  }

  90% {
    -webkit-transform: translate3d(0,-2px,0);
            transform: translate3d(0,-2px,0);
  }
}

.bounceDown {
  -webkit-animation-name: bounceDown;
          animation-name: bounceDown;
  -webkit-transform-origin: center bottom;
      -ms-transform-origin: center bottom;
          transform-origin: center bottom;
    -webkit-animation-iteration-count:infinite;
	-moz-animation-iteration-count:infinite;
	animation-iteration-count:infinite;
	-webkit-animation-duration:1s;
	-moz-animation-duration:1s;
	animation-duration:1s
}


@-webkit-keyframes fadeInUpSmall {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 10%, 0);
            transform: translate3d(0, 10%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInUpSmall {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 10%, 0);
            transform: translate3d(0, 10%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

.fadeInUpSmall {
  -webkit-animation-name: fadeInUpSmall;
          animation-name: fadeInUpSmall;
}

.blur {
    -webkit-filter: blur(8px); 
}

@-webkit-keyframes blurMe {
    0% { 
        -webkit-filter: blur(0); 
                filter: blur(0);
    }
    100% {
        -webkit-filter: blur(8px);
                filter: blur(8px);
    }
}

@keyframes blurMe {
    from { filter: blur(0); }
      to { filter: blur(8px); }
}

.blurMe {
    -webkit-animation-name: blurMe;
            animation-name: blurMe;
}


